<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { fetchStaffSave } from '@/service/api/group';
defineOptions({ name: 'GroupStaffEdit' });

const emit = defineEmits(['reloadSearch']);
const show = ref(false);

const model = ref<Api.GroupEntity.GroupStaffModel>({
  id: 0,
  name: '',
  phone: '',
  groupId: 0,
  operator: '',
  duty: '',
  remark: '',
  createdTime: '',
  updateTime: ''
});
const formRef = ref<FormInstance>();
const rules = ref({
  name: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '必填'
    }
  ],
  phone: [
    {
      required: true,
      trigger: ['blur', 'input'],
      message: '必填'
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: ['change', 'input']
    }
  ]
});
function close() {
  show.value = false;
}
function save() {
  formRef.value?.validate(async valid => {
    if (!valid) {
      window.$notification?.error('表单不完整，请检查');
      return;
    }
    fetchStaffSave(model.value).then(res => {
      window.$notification?.success('保存成功');
      Object.assign(model.value, res.data);
      emit('reloadSearch');
      // close();
    });
  });
}

function init(item: Api.GroupEntity.GroupStaffModel) {
  Object.assign(model, item);
  show.value = true;
}

defineExpose({
  init
});
</script>

<template>
  <ElDialog v-model="show" title="编辑成员">
    <ElForm ref="formRef" :model="model" :rules="rules" label-width="100px">
      <ElRow>
        <ElCol :md="12" :sm="24">
          <ElFormItem label="姓名" prop="name">
            <ElInput v-model="model.name" show-word-limit maxlength="50" placeholder="请输入姓名" />
          </ElFormItem>
        </ElCol>
        <ElCol :md="12" :sm="24">
          <ElFormItem label="职务" prop="duty">
            <ElInput v-model="model.duty" show-word-limit maxlength="50" placeholder="请输入职务" />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :md="12" :sm="24">
          <ElFormItem label="手机号" prop="phone">
            <ElInput v-model="model.phone" placeholder="请输入手机号" />
          </ElFormItem>
        </ElCol>
        <ElCol :md="12" :sm="24">
          <ElFormItem label="运营商" prop="operator">
            <ElInput v-model="model.operator" disabled placeholder="运营商" />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="24">
          <ElFormItem label="备注" prop="remark">
            <ElInput v-model="model.remark" type="textarea" show-word-limit maxlength="100" placeholder="请输入备注" />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :md="12" :sm="24">
          <ElFormItem label="创建时间" prop="createdTime">
            <ElInput v-model="model.createdTime" disabled placeholder="请输入创建时间" />
          </ElFormItem>
        </ElCol>
        <ElCol :md="12" :sm="24">
          <ElFormItem label="修改时间" prop="updateTime">
            <ElInput v-model="model.updateTime" disabled placeholder="请输入修改时间" />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="close()">关闭</ElButton>
        <ElButton type="primary" @click="save()">保存</ElButton>
      </div>
    </template>
  </ElDialog>
</template>
